<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>论文搜索引擎</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>📚 论文搜索引擎</h1>
            <p>基于本地Qwen LLM和LangChain的智能论文搜索平台</p>
        </header>

        <div class="search-section">
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="输入论文关键词、标题或研究领域...">
                <button id="searchBtn">🔍 搜索论文</button>
            </div>
            <div class="filters">
                <select id="categoryFilter">
                    <option value="">所有分类</option>
                    <option value="cs.AI">人工智能</option>
                    <option value="cs.CL">计算语言学</option>
                    <option value="cs.LG">机器学习</option>
                    <option value="cs.CV">计算机视觉</option>
                    <option value="cs.SE">软件工程</option>
                </select>
                <select id="sortFilter">
                    <option value="relevance">相关性</option>
                    <option value="date">最新发布</option>
                </select>
            </div>
        </div>

        <div class="main-content">
            <div class="results-section">
                <h2>搜索结果</h2>
                <div id="resultsContainer" class="results-container">
                    <div class="loading" id="loading">正在搜索论文...</div>
                    <div id="resultsList"></div>
                </div>
            </div>

            <div class="chat-section">
                <h2>AI问答助手</h2>
                <div class="chat-container">
                    <div id="chatMessages" class="chat-messages">
                        <div class="message bot-message">
                            <div class="message-content">
                                您好！我是论文搜索助手，可以帮您：
                                <ul>
                                    <li>搜索相关学术论文</li>
                                    <li>解答研究问题</li>
                                    <li>提供论文摘要和分析</li>
                                </ul>
                                请告诉我您的研究兴趣或问题！
                            </div>
                        </div>
                    </div>
                    <div class="chat-input">
                        <input type="text" id="chatInput" placeholder="输入您的研究问题...">
                        <button id="sendBtn">发送</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="features-section">
            <h2>功能特性</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <h3>🔍 智能搜索</h3>
                    <p>基于语义理解的论文搜索，支持关键词、标题、摘要等多维度检索</p>
                </div>
                <div class="feature-card">
                    <h3>🤖 AI问答</h3>
                    <p>基于RAG技术的智能问答，提供准确的研究指导和论文分析</p>
                </div>
                <div class="feature-card">
                    <h3>📚 知识库</h3>
                    <p>集成Arxiv论文库，涵盖计算机科学、数学、物理等多个领域</p>
                </div>
                <div class="feature-card">
                    <h3>🚀 本地部署</h3>
                    <p>支持本地Qwen模型部署，保护研究数据隐私和安全</p>
                </div>
            </div>
        </div>

        <footer class="footer">
            <p>论文搜索引擎 v1.0 | 基于FastAPI + LangChain + Qwen LLM</p>
        </footer>
    </div>

    <!-- 论文详情模态框 -->
    <div id="paperModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2 id="modalTitle">论文详情</h2>
            <div id="modalContent"></div>
            <div class="modal-actions">
                <button id="downloadBtn">📥 下载PDF</button>
                <button id="chatAboutBtn">💬 关于此论文提问</button>
            </div>
        </div>
    </div>

    <script src="js/app.js"></script>
</body>
</html>